import { useTranslation } from "react-i18next"
import React from "react"
import { OptionItem } from "./const"
import { class_esy } from "esy-ui"
import { useLocation, useNavigate } from "react-router-dom"

function MenuContent({ list, idx }: { list: OptionItem[]; idx: number }) {
    const { t } = useTranslation()
    const { pathname } = useLocation()
    const navigate = useNavigate()

    const goPath = (e) => {
        const dataPath = e.target.getAttribute("data-path")
        console.log(e.target, { dataPath })
        if (dataPath) {
            navigate(dataPath)
        }
    }

    return list.map((item) => (
        <div key={item.tKey}>
            <div className="px-4 text-text-2">{t(item.tKey)}</div>
            {item.children?.map((items) => (
                <div className={class_esy(["px-6 py-1.5 my-1.5 text-sm hover:bg-btn-hover-1 transition-colors duration-300 rounded-sm cursor-pointer", items.path === pathname ? "bg-hover text-primary hover:bg-hover" : ""])} key={items.tKey} data-path={items.path} onClick={goPath}>
                    {t(items.tKey)}
                    {idx === 1 ? (
                        <span className="text-text-2 mx-1 text-xs" data-path={items.path}>
                            {items.tKey}
                        </span>
                    ) : null}
                </div>
            ))}
        </div>
    ))
}
export default MenuContent
